<template>
  <view class="detail" :style="{backgroundImage:`url(${sites[index].img})`,backgroundSize: `100% 50%`,backgroundRepeat:'no-Repeat',}">
    <my-title :title="sites[index].text" @myBack="back"></my-title>
    <view class="bottom">
      <view class="icons" @click="changeIsStore()">
        <uni-icons :type="sites[index].select?'heart-filled':'heart'" color="red" size="30"></uni-icons>
      </view>
      <view class="site">
          <view class="icon">
            <uni-icons type="top" size="30" color="gray"></uni-icons>
          </view>
          <text style="font-size: 20px;font-weight: bold;">{{sites[index].text}}</text>
          <text style="font-size: 12px;">{{sites[index].info}}</text>
        </view>
      <view class="way">
        <text style="font-size: 17px;font-weight: bold;">必备攻略</text>
        <view class="ways">
          <block v-for="(way,i) in ways" :key="i">
            <view class="item">
              <my-suggest :sugg="way"></my-suggest>
            </view>
          </block>
        </view>
      </view>
      
    </view>
    <view class="btn">
      <text @click="findHome">查看附近住宿！</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        index : 0,
        sites:[
          {
            text:'长城',
             select: false,
            img:'https://pic.quanjing.com/1c/nv/QJ6194773230.jpg@%21350h',
            info:'长城（the Great Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。长城修筑的历史可上溯到西周时期，发生在首都镐京（今陕西西安）的著名典故“烽火戏诸侯”就源于此。春秋战国时期，列国争霸，互相防守，长城修筑进入第一个高潮，但此时修筑的长度都比较短。秦灭六国统一天下后，秦始皇连接和修缮战国长城，始有万里长城之称。明朝是最后一个大修长城的朝代，人们所看到的长城多是此时修筑'
          }, 
          {
            text: '洛杉矶',
             select: true,
            img:'https://img1.baidu.com/it/u=3918618449,3358612554&fm=253&fmt=auto&app=138&f=JPEG',
            info: '好莱坞（Hollywood），港译“荷里活”，位于美国西海岸加利福尼亚州洛杉矶市西北部郊外，依山傍水，景色宜人。“好莱坞”一词往往直接用来指美国的电影工业，由于美国许多著名电影公司设立于此，故经常被与美国电影和影星联系起来，好莱坞是世界闻名的电影中心，每年在此举办的奥斯卡金像奖颁奖典礼则是世界电影的盛会。好莱坞不仅是全球时尚的发源地，也是全球音乐电影产业的中心地带，拥有着世界顶级的娱乐产业和奢侈品牌，引领并代表着全球时尚的最高水平，比如梦工厂、华特迪士尼公司、二十世纪福克斯电影公司、哥伦比亚影业公司、索尼影视娱乐公司、环球影片公司、华纳兄弟娱乐公司、派拉蒙影业公司等等这些电影巨头，还有像RCAJIVE Interscope Records这样的顶级唱片公司都汇集在好莱坞的范畴之内。'
          }
        ],
        ways: [
          {
            img:'https://img1.baidu.com/it/u=1857333737,2283286935&fm=253&fmt=auto&app=138&f=JPEG',
            text:'新手游玩攻略',
            time:'90.9万热度'
          },
          {
            img:'https://img1.baidu.com/it/u=1765373617,1631370688&fm=253&fmt=auto&app=138&f=JPEG',
            text:'交通指南',
            time:'47.6万热度'
          }
        ]
      };
    },
    onLoad(option) {
      console.log(option)
          console.log(option)
          this.index = parseInt(option.data)
    },
    methods: {
      back() {
        console.log('detail')
        // uni.navigateBack({
        //     //关闭当前页面，返回上一页面或多级页面。
        //     delta:1
        // });
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }, 
      changeIsStore(){
        this.sites[this.index].select = !this.sites[this.index].select
      },
      findHome(){
        uni.navigateTo({
          url:'/subpkg/hotal/hotal?data='+this.index
        })
      }
    }
  }
  
</script>

<style lang="scss">
.detail {
  .bottom {
    position: relative;
    .icons{
      width:40px;
      height: 40px;
      border-radius: 60%;
      background-color: white;
      position: absolute;
      right: 50rpx;
      top:-35rpx;
      align-items: center;
      display: flex;
      justify-content: center;
    }
    border-start-start-radius: 15px;
    border-start-end-radius: 15rpx;
    padding: 0 30rpx;
    margin-top: 250rpx;
    background-color: #efefef;
    .site {
      display: flex;
      flex-direction: column;
      .icon {
        padding: 10rpx 0;
        text-align: center;
      }
      text {
        margin-bottom: 20rpx;
      }
    }
    .way {
      .ways {
        .item {
          padding: 20rpx 0;
        }
      }
    }
  }
  .btn {
    position: sticky;
    bottom: 0;
    left: 0;
    // background-color: black;
    padding-bottom: 20rpx;
    justify-content: center;
    padding: 20rpx 100rpx;
    display: flex;
    justify-content: center;
    text {
      text-align: center;
      display: block;
      font-size: 20;
      font-weight: bold;
      padding: 20rpx 0;
      background-color: #1296db;
      width: 70%;
      border-radius: 20px;
    }
  }
}
</style>
